<template>
    <el-container class="container_box">
        <el-header style="height:70px"><AppHeader/></el-header>
        <el-container>
            <el-aside :width="isCollapse ? '64px':'240px'">
                <!-- 伸缩按钮 -->
                <div class="toggle-box">
                    <div  class="" >
                        <el-button type="warning" @click="toggleCollapse">
                            <i :class="[isCollapse ? 'el-icon-s-fold':'el-icon-s-unfold','btn_icon']"></i>
                        </el-button>
                    </div>
                </div>
                <!-- 侧边菜单条 -->
                <el-menu
                background-color="#fff"
                text-color="black"
                active-text-color="#ffd04b"
                unique-opened :collapse="isCollapse"
                :collapse-transition="false"
                router :default-active="activePath">
                    <!-- 侧边头信息 -->
                    <div :class="isCollapse ? 'sidebar-header-none':'sidebar-header'">
                    <div class="sidebar-img">
                        <img :src="backUrl+userInfo.profilePhoto" alt="">
                    </div>
                    <div class="sidebar-detail">
                        <h1>身份：管理员</h1>
                        <p>{{userInfo.username}}</p>
                    </div>
                    <div class="sibebar-main">
                        MAIN
                    </div>
                    </div>

                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">

                        <!-- 一级菜单 -->
                        <template slot="title">
                            <i :class="iconObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>

                        <!-- 二级菜单 -->
                        <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children"
                        :key=subItem.id @click="saveNavState('/' + subItem.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>
                    <!-- <p>{{userInfo}}</p> -->

                </el-menu>
            </el-aside>
            <el-main>
              <!-- 路由占位符 -->
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import { mapState } from 'vuex'
import AppHeader from './backComponets/Header.vue'
// import Sidebar from './backComponets/Sidebar'
export default {
  components: {
    AppHeader
    // Sidebar
  },
  data () {
    return {
      // 是否折叠
      isCollapse: false,
      // 菜单图标列表
      iconObj: {
        101: 'iconfont icon-baobiao',
        102: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        104: 'iconfont icon-danju',
        105: 'el-icon-s-comment',
        106: 'el-icon-s-promotion',
        107: 'el-icon-s-tools'
      },
      // 被激活的链接地址
      activePath: '',

      // 菜单列表
      menuList: [
        {
          id: 101,
          authName: '仪表盘',
          children: [
            {
              id: 1011,
              authName: '欢迎页~',
              path: 'index/welcome'
            },
            {
              id: 1012,
              authName: '报表统计',
              path: 'index/statistics'
            }
          ]
        },
        {
          id: 102,
          authName: '用户管理',
          children: [
            {
              id: 1021,
              authName: '用户列表',
              path: 'user/users'
            }
          ]
        },
        {
          id: 103,
          authName: '权限管理',
          children: [
            {
              id: 1031,
              authName: '角色管理',
              path: 'power/roles'
            },
            {
              id: 1032,
              authName: '权限列表',
              path: 'power/rights'
            }
          ]
        },
        {
          id: 104,
          authName: '文章管理',
          children: [
            {
              id: 1041,
              authName: '文章列表',
              path: 'article/articles'
            },
            // {
            //   id: 1042,
            //   authName: '文章发布',
            //   path: 'article/issue'
            // },
            {
              id: 1043,
              authName: '文章分类',
              path: 'article/classify'
            }
          ]
        },
        {
          id: 105,
          authName: '评论管理',
          children: [
            {
              id: 1051,
              authName: '评论列表',
              path: 'comment/comments'
            }
          ]
        },
        {
          id: 106,
          authName: '消息管理',
          children: [
            {
              id: 1061,
              authName: '发送信件',
              path: 'news/emails'
            },
            {
              id: 1062,
              authName: '投诉列表',
              path: 'news/complaints'
            }
          ]
        },
        {
          id: 107,
          authName: '系统设置',
          children: [
            {
              id: 1071,
              authName: '风格设置',
              path: 'set/styles'
            }
          ]
        }
      ]

    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }
    )
  },
  methods: {
    // 点击按钮,切换菜单的折叠和展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  },
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')

    // 获取到个人信息，存储到vuex
    if (typeof (this.userInfo.username) === 'undefined') {
      // this.$message.warning('获取用户信息！')
      this.$store.dispatch('getUserInfo')
    }
  },
  mounted () {
    // 监听屏幕大小，宽度小于1000将隐藏右边的栏目
    window.onresize = () => {
      return (() => {
        // console.log(document.body.clientWidth)
        if (document.body.clientWidth < 1200) {
          this.isCollapse = true
        } else {
          this.isCollapse = false
        }
      })()
    }
  }
}
</script>

<style lang="less" scoped>

.container_box{
    height: 100%;
}
.el-header{
    // background-color: #373d41;
    padding: 0;
    box-sizing: border-box;
}
.el-aside{
    background-color: #fff;

    .el-menu{
      border-right: none;
    }
    .toggle-box{
      width: inherit;
        text-align: center;
        background: rgb(230, 230, 153);
        .el-button{
            height: 30px;
            width: 100%;
            position: relative;
            outline:none;

            .btn_icon{
                line-height: 30px;
                font-size: 2em;
                // border:1px solid red;
                color: yellow;
                position:absolute;
                top:50%;
                left:50%;
                transform: translate(-50%, -50%);
            }
        }

        // .toggle-button{
        //     color:#fff;
        //     letter-spacing: 0.3em;font-weight:bold;
        //     cursor:pointer; background-color: rgb(214, 214, 155);height:30px;
        // }
    }

    .sidebar-header{
        height: 130px;
        box-sizing: border-box;
        background-color: #fff;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        // align-items: center;
        position: relative;
        padding-top: 10%;
        border-bottom: 0.5px solid rgb(255, 235, 182);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        .sidebar-img{
            width: 55px;
            height: 55px;
            border: 1px solid rgb(214, 214, 155);
            border-radius: 50%;
            margin-right: 15px;
            margin-left: -9%;

            img{
            width: 100%;
            height: inherit;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
            }
        }
        .sidebar-detail{
            height: 55px;
            box-sizing: border-box;
            padding-top: 3%;
            // border: 1px solid green;

            h1{
            font-size: 1em;
            color: #333;
            }
            p{
            font-size: 0.9em;
            font-weight: 200;
            margin-bottom: 0;
            color: #aaa;
            }
        }
        .sibebar-main{
            width: 100%;
            // background-color: rgb(235, 235, 224);
            position: absolute;
            padding-left: 12%;
            bottom: 5%;
            text-transform: uppercase;
            font-weight: 400;
            color: #ccc;
            font-size: 0.8em;
        }

    }
    .sidebar-header-none{
        display: none;
    }
    .iconfont{
      margin-right: 10px;
      margin-left: 4px;
    }
}

.el-main{
    background-color: rgb(236, 243, 247);
    // background-color: white;
    border-left: 1px solid #eee;
}

</style>

<style lang="less">
  // 为了改变导航栏的颜色，需要去掉scoped
  .el-menu{
      .el-submenu__title:hover{
        background-color: rgb(255, 216, 110) !important;
      }
      .el-submenu__title.is-active{
        background-color: rgb(255, 208, 75) !important;
      }
      .el-menu-item:hover{
        background-color: rgb(255, 216, 110) !important;
      }
      .el-menu-item.is-active{
        background-color: rgb(255, 208, 75) !important;
        color:beige !important;
      }
    }
</style>
